<template>
  <div class="app-container">
    <el-tabs type="border-card" v-model="activeName">
      <el-tab-pane label="全部任务" name="all"></el-tab-pane>
      <el-tab-pane label="待排查" name="handle"></el-tab-pane>

      <el-row :gutter="20">
        <el-col :span="24">
          <SearchForm
            v-show="showSearch"
            v-model="queryParams"
            :options="options.formOps"
            @onQuery="getList"
          >
          </SearchForm>
          <el-row :gutter="10" class="mb8">
            <right-toolbar
              v-model:showSearch="showSearch"
              @queryTable="getList"
            ></right-toolbar>
          </el-row>
          <Table
            ref="table"
            :auto-featch="true"
            :fetch-data="fetchData"
            :options="options.table"
            :actionWidth="100"
          >
            <template #userNames="{ row }">{{ row.personName }}</template>
            <template #actionButton="{ row }">
              <el-button
                type="text"
                style="width: 60px"
                @click="handleFiles(row)"
                >附件</el-button
              >
            </template>
          </Table>
        </el-col>
      </el-row>
    </el-tabs>
    <FileDialog
      title="文件"
      ref="fileDialog"
      @onSubmit="onYsSubmit"
      :limit="1"
    ></FileDialog>
  </div>
</template>

<script setup>
import Table from "@/components/Table/index.vue";
import SearchForm from "@/components/searchForm/index";
import formJson from "./components/options.json";
import { apis as APIS } from "@/api/yhpc/jhprcrw.js";
import { useAsyncData, useFormJsonNew } from "@/views/hooks/useAsyncData.js";
import FileDialog from "@/components/filesDialog/index.vue";
const activeName = ref("all");
const filterForm = reactive({});
watch(
  () => activeName,
  () => {
    if (activeName.value == "all") {
      filterForm.checkState = null;
      getList();
    } else {
      filterForm.checkState = "未排查";
      getList();
    }
  },
  { deep: true }
);
const { proxy } = getCurrentInstance();
const ops = useFormJsonNew(formJson, {
  sort: [],
  sortable: [],
});

const options = reactive({
  table: ops,
  formOps: ops.filter((i) =>
    ["planUserNames", "checkUserName", "checkLevel"].includes(i.prop)
  ),
});
const showSearch = ref(true);
const dialogVform = ref();
const table = ref();

const { fetchData, getList, queryParams, form } = useAsyncData({
  APIS,
  formJson,
  dialogVform,
  table,
  proxy,
  filterForm,
});

const editRow = ref({});
const fileDialog = ref();
const handleFiles = (row) => {
  editRow.value = row;
  let files = [];

  if (row.planTaskFileUrl) {
    files = [
      {
        url: row.planTaskFileUrl,
        name: row.planTaskFileName,
        id: row.planTaskFileId,
      },
    ];
  }
  fileDialog.value.open(files);
};

const onYsSubmit = (files) => {
  const fileForm = files[0] || {};
  APIS.updateFile({
    id: editRow.value.id,
    checkState: editRow.value.checkState,
    planTaskFileUrl: fileForm.url,
    planTaskFileName: fileForm.name,
    planTaskFileId: fileForm.id,
  }).then((res) => {
    fileDialog.value.close([]);
    getList();
  });
};
</script>

<style lang="scss" scoped>
::v-deep.el-form-item__label {
  text-align: right !important;
}
</style>
